<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换肤</title>
    <style>
        html, body, div {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            background: url(img/skinPeeler_images/1.jpg) no-repeat;
            background-size:cover;
            position:relative;
        }
        body::before{
            content:"简单的换肤,点击五张小图中的一个可以改变可视区域背景，用到的知识点是背景图片的background-size属性和事件中this的指向";
            padding-left:15px;
            font-size: 22px;
            color:white;
            width:100px;
            position:absolute;
        }
        .back {
            width: 100%;
            height: 180px;
            background: rgba(255, 255, 255, 0.3);
            padding-top: 50px;
            text-align: center;
        }
        .back img {
            width: 200px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var h = $(window).height();
            $("body").css({height:h});
        })
    </script>
</head>
<body>
<div class="back">
    <img id="pic1" src="img/skinPeeler_images/1.jpg" alt="">
    <img id="pic2" src="img/skinPeeler_images/2.jpg" alt="">
    <img id="pic3" src="img/skinPeeler_images/3.jpg" alt="">
    <img id="pic4" src="img/skinPeeler_images/4.jpg" alt="">
    <img id="pic5" src="img/skinPeeler_images/5.jpg" alt="">
</div>

<script>
    //获取页面元素
    //var tupian1 = document.getElementById("pic1");
    var tuP1 = myId("pic1");
    var tuP2 = myId("pic2");
    var tuP3 = myId("pic3");
    var tuP4 = myId("pic4");
    var tuP5 = myId("pic5");


    var changePic = function () {
        //this指向事件源
        document.body.style.backgroundImage = "url(" + this.src + ")";
    };
    tuP1.onclick = changePic;
    tuP2.onclick = changePic;
    tuP3.onclick = changePic;
    tuP4.onclick = changePic;
    tuP5.onclick = changePic;
    //函数可以帮我们获取页面元素
    function myId(id) {
        return document.getElementById(id);
    }
</script>
</body>
</html>